{% extends "admin/base.html" %}

{% block title %}{% if action == 'add' %}添加联系方式{% else %}编辑联系方式{% endif %}{% endblock %}

{% block page_title %}{% if action == 'add' %}添加联系方式{% else %}编辑联系方式{% endif %}{% endblock %}

{% block content %}
<div class="card shadow-sm">
    <div class="card-header bg-white border-bottom-0" style="padding: 15px 20px;">
        <h2 class="h4 mb-0 font-weight-bold text-gray-800">{% if action == 'add' %}添加新联系方式{% else %}编辑联系方式{% endif %}</h2>
    </div>
    <div class="card-body p-4">
        <form method="post" action="/admin/contacts/save" id="contactForm">
            {% if contact %}
            <input type="hidden" name="id" value="{{ contact.id }}">
            {% endif %}
            
            <div class="form-row">
                <div class="col-md-8">
                    <div class="form-group mb-4">
                        <label for="name" class="font-weight-medium text-gray-700 mb-1 d-block">名称 <span style="color: #e74c3c;">*</span></label>
                        <input type="text" id="name" name="name" value="{% if contact %}{{ contact.name }}{% endif %}" 
                               class="form-control" placeholder="请输入联系方式名称" required>
                        <small class="form-text text-muted">例如：我的微信、GitHub账号等</small>
                    </div>
                    
                    <div class="form-group mb-4">
                        <label for="type" class="font-weight-medium text-gray-700 mb-1 d-block">类型 <span style="color: #e74c3c;">*</span></label>
                        <select id="type" name="type" class="form-control" required>
                            <option value="" disabled {% if not contact %}selected{% endif %}>请选择联系方式类型</option>
                            <option value="微信" {% if contact and contact.type == '微信' %}selected{% endif %}>微信</option>
                            <option value="QQ" {% if contact and contact.type == 'QQ' %}selected{% endif %}>QQ</option>
                            <option value="微博" {% if contact and contact.type == '微博' %}selected{% endif %}>微博</option>
                            <option value="Gitee" {% if contact and contact.type == 'Gitee' %}selected{% endif %}>Gitee</option>
                            <option value="GitHub" {% if contact and contact.type == 'GitHub' %}selected{% endif %}>GitHub</option>
                            <option value="邮箱" {% if contact and contact.type == '邮箱' %}selected{% endif %}>邮箱</option>
                            <option value="音乐" {% if contact and contact.type == '音乐' %}selected{% endif %}>音乐</option>
                        </select>
                    </div>
                    
                    <div class="form-group mb-4">
                        <label for="url" class="font-weight-medium text-gray-700 mb-1 d-block">链接 <span style="color: #e74c3c;">*</span></label>
                        <input type="text" id="url" name="url" value="{% if contact %}{{ contact.url }}{% endif %}" 
                               class="form-control" placeholder="请输入链接地址" required>
                        <small class="form-text text-muted">例如：https://github.com/username</small>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card bg-gray-50 border">
                        <div class="card-header bg-white border-bottom">
                            <h5 class="card-title mb-0 text-sm font-medium">图标预览</h5>
                        </div>
                        <div class="card-body text-center py-5">
                            <div id="iconPreview" class="mb-3">
                                <i id="previewIcon" class="{% if contact %}{{ contact.icon }}{% else %}fa fa-address-card-o{% endif %}" 
                                   style="font-size: 48px; color: #6c757d"></i>
                            </div>
                            <p class="text-sm text-gray-600">图标会根据选择的类型自动生成</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-check mb-4 p-2 rounded border">
                <input type="checkbox" id="is_active" name="is_active" class="form-check-input" 
                       {% if not contact or contact.status %}checked{% endif %} />
                <label for="is_active" class="form-check-label ml-2 text-gray-700">启用</label>
            </div>
            
            <div class="mt-4 pt-4 border-t">
                <button type="submit" class="btn btn-primary btn-sm px-4 py-2">
                    <i class="fa fa-save mr-1"></i> 保存
                </button>
                <a href="/admin/contacts" class="btn btn-secondary btn-sm px-4 py-2 ml-2">
                    <i class="fa fa-times mr-1"></i> 取消
                </a>
            </div>
        </form>
    </div>
</div>

<!-- 表单验证和图标预览脚本 -->
<script>
(function() {
    var form = document.getElementById('contactForm');
    var typeSelect = document.getElementById('type');
    var previewIcon = document.getElementById('previewIcon');
    
    // 图标映射
    var iconMap = {
        '微信': 'fa fa-weixin',
        'QQ': 'fa fa-qq',
        '微博': 'fa fa-weibo',
        'Gitee': 'fa fa-git',
        'GitHub': 'fa fa-github',
        '邮箱': 'fa fa-envelope',
        '音乐': 'fa fa-music'
    };
    
    // 颜色映射
    var colorMap = {
        '微信': '#2ecc71',
        'QQ': '#16a085',
        '微博': '#ffc107',
        'Gitee': '#17a2b8',
        'GitHub': '#17a2b8',
        '邮箱': '#dc3545',
        '音乐': '#28a745'
    };
    
    // 监听类型变化，更新图标预览
    if (typeSelect && previewIcon) {
        typeSelect.addEventListener('change', function() {
            var type = this.value;
            if (type && iconMap[type]) {
                previewIcon.className = iconMap[type];
                previewIcon.style.color = colorMap[type];
            } else {
                previewIcon.className = 'fa fa-address-card-o';
                previewIcon.style.color = '#6c757d';
            }
        });
    }
    
    // 表单验证
    if (form) {
        form.addEventListener('submit', function(event) {
            var nameInput = document.getElementById('name');
            var urlInput = document.getElementById('url');
            
            // 重置错误提示
            nameInput.classList.remove('border-danger');
            urlInput.classList.remove('border-danger');
            
            // 验证名称
            if (!nameInput.value.trim()) {
                nameInput.classList.add('border-danger');
                nameInput.focus();
                alert('请输入联系方式名称');
                event.preventDefault();
                return false;
            }
            
            // 验证链接
            if (!urlInput.value.trim()) {
                urlInput.classList.add('border-danger');
                urlInput.focus();
                alert('请输入链接地址');
                event.preventDefault();
                return false;
            }
            
            // 简单的URL格式验证
            var urlPattern = /^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?$/;
            if (!urlPattern.test(urlInput.value.trim())) {
                urlInput.classList.add('border-danger');
                urlInput.focus();
                alert('请输入有效的链接地址');
                event.preventDefault();
                return false;
            }
            
            return true;
        });
    }
})();
</script>
{% endblock %}